<template>
  <view class="conten">
       <view class="experience" v-if="!guideStatus">
          <view class="experImg" v-for="(item,index) in courseList" :key="index">
            <image mode="widthFix" :src="item.imgUrl"></image>
          </view>
             <!-- 定位到右边中间 -->
            <view class="postion-right">
              <view 
                  class="icon-name-box"
                  v-for="(item,index) in postionRight"
                  :key="item.id"
                  @click="pulicPhone(index)"
                >
                  <view class="iconfont">{{ item.icon }}</view>
                  <view class="icon-name">{{ item.name }}</view>
              </view>
            </view>
          <!-- 弹出层 -->
          <view class="publicPhone-box" type="center" v-if="pupopState">
            <view class="publicPhone" v-if="iscodeImg === 0">
              <image style="border-radius: 10rpx;" src="../../../static/my/official.jpg"></image>
            </view>
            <view v-if="iscodeImg === 1" class="phone" @click="copy">18138412315</view>
          </view>
          <!-- 定位顶部的按钮 -->
          <view class="footer">
<!--            <view class="login-title">
              <view class="loin-img"><image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/logo.png"></image></view>
              <view>大爆炸思维</view>
            </view> -->
             <view class="btnget" @click="promptlyGet">下载APP</view>
          </view>
       </view>
       <view class="guide"  v-if="guideStatus">
         <image mode="widthFix" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/zhiying.jpg"></image>
       </view>
  </view>
</template>

<script>
  import { squeezePage } from '@/utils/api.js'
  import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
  export default {
    components: { easyLoadimage },
  	data() {
  		return {
        times: null, // 定时器时间
        pupopState: false, // 二维码与电话显示与隐藏
        iscodeImg: null, // 二维码与电话内容切换
        postionRight: [
          { id: 1, name: '公众号', icon: '\ue624'},
          { id: 2, name: '电话', icon: '\ue639'},
          { id: 3, name: '返回顶部', icon: '\ue65a'}
        ],
        courseStaus:false,
        courseList:[], // 图片数据
        courseId:'a368d592-3f65-b9af-04ac-3a00150f4e72', // 体验课id：a368d592-3f65-b9af-04ac-3a00150f4e72，// 系统课id:444e80df-20f1-17d2-7d5a-3a0016483644
        guideStatus: false,
        BarHeight: uni.getSystemInfoSync().statusBarHeight +44,
      }
    },
    onLoad() {
       this.$wechat.unseBehavior()
    },
    onShow() {
      this.$wechat.share({
        title: '从组装中国空间站开始学习思维建模',
        desc: '编程是载体，思维建模更重要！',
        link: window.location.href,
        imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/addwx/app_log.png'
       })
      this.getDetail()
    },
    onReady() {},
    methods:{
      // 复制
      copy() {
        uni.makePhoneCall({
            phoneNumber: '18138412315' //仅为示例
        });
      },
      // 点击公众号与电话与回到顶部
      pulicPhone(index) {
        if(index !== 2) {
          this.pupopState = true
          this.iscodeImg = index
        }else{
          uni.pageScrollTo({
            scrollTop: 0
          })
        }
        clearTimeout(this.times)
        this.times = setTimeout(() => {
          this.pupopState = false
        },2000)
      },
      // 获取详情
      async getDetail() {
        const vm = this
        const detailRes = await squeezePage(vm.courseId)
        vm.$nextTick(function(){
          vm.courseList = detailRes.coverImageUrls.map(item => ({imgUrl:item,show: false,loaded: false}))
        })
      },
      // 下载app
      promptlyGet() {
        uni.navigateTo({
          url: '/pages/my/download/commonDown'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  image{
    width: 100%;
    height: 100%;
    vertical-align:bottom;
  }
  .experience{
    // 体验课experImg
    .experImg{
      width: 100%;
      height: auto;
      // display: flex;
      // flex-direction: column;
    }
  }
  .guide{
    width: 100%;
    height: 100vh;
  }

  .postion-right{
    padding: 20rpx;
    background: rgba(250,250,250,0.6);
    backdrop-filter: blur(20rpx);
    -webkit-backdrop-filter: blur(40rpx);
    -moz-backdrop-filter: blur(40rpx);
    -ms-backdrop-filter: blur(40rpx);
    border-radius: 30rpx 0 0 30rpx;
    position: fixed;
    top: 30%;
    right: 0;
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .icon-name-box:nth-of-type(2){
     margin: 50rpx 0 !important;
    }
    .icon-name-box{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .iconfont{
        font-size: 50rpx;
        color: #FF800C;
      }
      .icon-name{
        font-size: 24rpx;
        color: #FFFFFF;
        text-shadow: 2rpx 3rpx 14rpx #000;
      }
    }
  }
  // 弹出层
  .publicPhone-box{
    width: 258rpx;
    height: 258rpx;
    position: fixed;
    top:35%;
    left: 0;
    right: 0;
    z-index: 12;
    margin: auto;
    .publicPhone{
      width: 258rpx;
      height: 258rpx;
    }
    .phone{
      width: 300rpx;
      text-align: center;
      padding: 10rpx 0rpx;
      background: #FFFFFF;
      border-radius: 10rpx;
    }
  }
  .footer{
    width: 750rpx;
    height: 120rpx;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(80rpx);
    -webkit-backdrop-filter: blur(80rpx);
    -moz-backdrop-filter: blur(80rpx);
    -ms-backdrop-filter: blur(80rpx);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0rpx;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx;
    margin: auto;
    .login-title{
      display: flex;
      align-items: center;
      color: #FFFFFF;
      .loin-img{
        width: 80rpx;
        height: 80rpx;
        margin-right: 16rpx;
      }
    }
    .btnget{
       width: 100%;
       height: 88rpx;
       border-radius: 44rpx;
       line-height: 88rpx;
       font-weight: bold;
       background: #FF800C;
       text-align: center;
       color: #FFFFFF;
       animation-fill-mode: both;
       animation: btnget 0.75s infinite 1s;
       font-size: 48rpx;
       font-weight: bold;
       letter-spacing: 0.2em;
    }
     @keyframes btnget {
        0% { transform: scale(1,1);}
        50% { transform: scale(0.95,0.95);}        
        100% { transform: scale(1,1);}
      }
  }
</style>

